import React, { useEffect, useMemo, useState } from "react";
import { useNavigate, useLocation, useSearchParams } from "react-router-dom";
import {
  NavBar,
  Card,
  Button,
  Toast,
  ProgressBar,
  DotLoading,
  Popup,
} from "antd-mobile";
import axios from 'axios'
import styles from "./orderd.module.css";

function Index() {
  const navigate = useNavigate();
  const { state } = useLocation();
  const [sq] = useSearchParams();
  const price = sq.get("price");
  const id = state.id;
  const title = state.title;

  const [tickState, setTickState] = useState(1);
  const [proNum, setProNum] = useState(0);
  const [visible1, setVisible1] = useState(false);
  const [proNum2, setProNum2] = useState(0);

  useEffect(() => {
    setTickState(2);
    const random = Math.floor(Math.random() * 10) + 1;
    const timer = setInterval(() => {
      setProNum((pre) => {
        let progressnum = pre + 25;
        if (progressnum >= 100) {
          progressnum = 100;
          clearInterval(timer);
          if (random > 2) {
            setTickState(4);
            Toast.show("占座成功");
            return;
          } else {
            setTickState(3);
            Toast.show("占座失败");
            return;
          }
        }
        return progressnum;
      });
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  const renderDom = useMemo(() => {
    switch (tickState) {
      case 1:
        return <div></div>;
      case 2:
        return (
          <div>
            占座中 <DotLoading />
            <p>
              您的订单正在12306排队占座中，如长时间未成功占
              座，可能票源紧张，建议取消排队更换其它车次
            </p>
          </div>
        );
      case 3:
        return (
          <div>
            占座失败
            <p>失败原因 lua返回的失败原因</p>
          </div>
        );
      case 4:
        return (
          <div>
            占座成功
            <p>席位已成功锁定，请在 00:29:59 内完成支付</p>
          </div>
        );
      default:
        break;
    }
  }, [tickState]);

  const handelSubmit = () => {
    setVisible1(true);
    setTimeout(() => {
      setProNum2(100);
    }, 3000);
  };
  const handelPay = async () => {
    const res = await axios.get("/api/pay", { params: { id, price, title } });
    console.log(res.data);
  };

  return (
    <div style={{ paddingBottom: 50 }}>
      <NavBar onBack={() => navigate(-1)}>下单支付</NavBar>
      <Card>
        <div className={styles.list}>
          <ProgressBar
            percent={proNum}
            style={{
              "--track-width": "4px",
            }}
          />
          {renderDom}
          <div className={styles.listItem}>
            <p>订单号：{state.id}</p>
            <div className={styles.itemCon}>
              <span>{state.start}</span>
              <span>{state.end}</span>
              <span>{state.startTime}</span>
              <span>¥{state.tick.secondTick}</span>
            </div>
            <p>列车时刻表</p>
          </div>
        </div>
      </Card>

      <Button
        disabled={tickState <= 3 ? true : false}
        onClick={() => handelSubmit()}
      >
        {" "}
        提交订单{" "}
      </Button>
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false);
        }}
        onClose={() => {
          setVisible1(false);
        }}
      >
        <ProgressBar
          percent={proNum2}
          style={{
            "--track-width": "4px",
          }}
        />
        <h3>
          支付中
          <DotLoading />
        </h3>
        <div className={styles.list}>
          <div className={styles.listItem}>
            <div className={styles.itemCon}>
              <span>{state.start}</span>
              <span>{state.end}</span>
              <span>{state.startTime}</span>
              <span>¥{state.tick.secondTick}</span>
            </div>
          </div>
        </div>
        <Button block color="primary" size="large" onClick={() => handelPay()}>
          支付宝
        </Button>
        <Button block color="success" size="large">
          微信
        </Button>
        <Button block color="danger" size="large">
          云闪付
        </Button>
      </Popup>
    </div>
  );
}

export default Index;
